<template>
  <div>
    <input type="file" accept="" @change="handleFileChange" />
    <!-- 图片预览 -->
  </div>
</template>

<script setup>
import { ref, watch, defineEmits } from "vue";

// v-model 的 prop 和 emit 事件
const props = defineProps({
  modelValue: String,
});
const emit = defineEmits(["update:modelValue"]);

// 用于存储图片的 Base64 编码
const base64Data = ref(props.modelValue);

// 用于图片预览的 URL
const imageUrl = ref("");

watch(
  base64Data,
  (newValue) => {
    console.log(newValue);
    // 当 Base64 编码改变时，更新 v-model 绑定的值
    emit("update:modelValue", newValue);
    // 同时更新图片预览
    imageUrl.value = newValue;
  },
  { immediate: true }
);

// 将文件转换为 Base64
const fileToBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

// 处理文件选择变化
const handleFileChange = async (event) => {
  const files = event.target.files;
  if (files && files[0]) {
    try {
      // 转换文件为 Base64 编码
      const base64 = await fileToBase64(files[0]);
      base64Data.value = base64; // 更新 Base64 编码
    } catch (error) {
      console.error("Error converting file to Base64:", error);
    }
  }
};
</script>

<style scoped>
.image-preview img {
  max-width: 100%;
  max-height: 200px; /* 根据需要调整预览图大小 */
}
</style>